<template>
  <Modal
      v-model="modal.visible"
      :title="modal.title"
      width="500"
      @ok="handleOk"
      @cancel="handleCancel"
  >
    <el-form
        :model="formData"
        :rules="rules"
        ref="form"
        label-width="100px"
    >
      <el-form-item label="字典类型" prop="dict_code">
        <el-input readonly v-model="formData.dict_code" placeholder="请输入字典类型" />
      </el-form-item>
      <el-form-item label="字典标签" prop="dict_value_label">
        <el-input v-model="formData.dict_value_label" placeholder="请输入字典标签" />
      </el-form-item>
      <el-form-item label="字典键值" prop="dict_value_value">
        <el-input v-model="formData.dict_value_value" placeholder="请输入字典键值" />
      </el-form-item>
      <el-form-item label="回显类型" prop="dict_value_type">
        <el-select v-model="formData.dict_value_type" placeholder="请选择回显类型">
          <el-option v-for="item in dict_value_type()" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="formData.status" placeholder="请选择状态">
          <el-option v-for="item in status()" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="显示排序" prop="sort">
        <el-input type="number" v-model="formData.sort" placeholder="请输入排序" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
  </Modal>
</template>

<script lang="ts">
export default {
  name: "DictValueModel"
}
</script>

<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from "vue"
import Modal from '@/components/Modal.vue'
import {ElMessage, FormInstance, FormRules} from 'element-plus'
import {useModelCreateFormData} from '@/hooks/useModelCreate'
import {systemDictValueAddType, systemDictValueListItemType} from '@/type/system.dictValue'
import {useRoute} from 'vue-router'
import {dict_value_type, status} from '@/utils/select'
import {dictValueAdd, dictValueEdit} from '@/api/system.dict'

const route = useRoute()

const form = ref<FormInstance>()

const emit = defineEmits<{
  (event: 'list'): void
}>()

const modal = reactive({
  visible: false,
  title: "",
  type: 0,
  id: 0
})

const formData = reactive<systemDictValueAddType>({
  dict_id: 0,
  dict_code: "",
  dict_value_type: "",
  dict_value_label: "",
  status: 0,
  sort: 0,
  remark: "",
  dict_value_value: "",
  // is_default: ""
})

const rules:FormRules<systemDictValueAddType> = ({
  dict_code: [{required: true, message: '请输入字典编码', trigger: 'blur'}],
  dict_value_type: [{required: true, message: '请输入字典值类型', trigger: 'blur'}],
  dict_value_label: [{required: true, message: '请输入字典值标签', trigger: 'blur'}],
  dict_value_value: [{required: true, message: '请输入字典值', trigger: 'blur'}],
  status: [{required: true, message: '请输入状态', trigger: 'blur'}],
  sort: [{required: true, message: '请输入排序', trigger: 'blur'}],
  remark: [{required: false, message: '请输入备注', trigger: 'blur'}]
})

const handleCancel = () => {
  modal.visible = false
}

const handleOk = () => {
  form.value?.validate((valid) => {
    if (valid) {
      if (modal.type === 0) {
        dictValueAdd(formData).then(res => {
          if (res.code === 200) {
            ElMessage.success(res.msg)
            emit('list')
            handleCancel()
          }
        }).finally(() =>{
          modal.visible = false
        })
      }
      if (modal.type === 1) {
        dictValueEdit({
          id: modal.id,
          ...formData
        }).then(res => {
          if (res.code === 200) {
            ElMessage.success(res.msg)
            emit('list')
            handleCancel()
          }
        }).finally(() =>{
          modal.visible = false
        })
      }
    }
  })
}

const init = (code: string) => {
  modal.type = 0
  modal.title = "添加字典数据"
  useModelCreateFormData<systemDictValueAddType>(formData)
  nextTick(() => {
    form.value?.clearValidate()
    formData.dict_id = <number>route.query.id
    formData.dict_code = code
    formData.status = 1
    modal.visible = true
  })
}

const edit = (row:systemDictValueListItemType) => {
  modal.type = 1
  modal.title = "修改字典数据"
  modal.id = row.id
  useModelCreateFormData<systemDictValueAddType>(formData, row)
  nextTick(() => {
    form.value?.clearValidate()
    modal.visible = true
  })
}

defineExpose({
  init,
  edit
})

onMounted( () => {
} )
</script>

<style scoped lang="scss">

</style>
